<template>

  <el-dialog v-model="dialogVisible" title="添加角色" width="30%" :before-close="handleClose">

    <div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <!-- <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="ruleForm.rolename" />
        </el-form-item>

        <el-form-item label="角色描述" prop="roledes">
          <el-input v-model="ruleForm.roledes" />
        </el-form-item> -->

        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="ruleForm.rolename" />
        </el-form-item>

        <el-form-item label="角色描述" prop="roledes">
          <el-input v-model="ruleForm.roledes" />
        </el-form-item>

      </el-form>
    </div>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addroles">确定</el-button>
      </span>
    </template>





  </el-dialog>

</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessageBox } from 'element-plus';
import { addRoles } from '../../../api/role.js'
import showElemessage from '../../../tools/showElemessage';
let dialogVisible = ref(false)

let handleClose = () => {
  dialogVisible.value = false;
  ruleForm.rolename = '',
   ruleForm.roledes = ''
}
//定义一个初始化方法
let init = () => {
  dialogVisible.value = true;
}
defineExpose({
  init: init
})


let ruleForm = reactive({
  rolename: '',
  roledes: '',

})

let rules = reactive({
  rolename: { required: true, message: "请您填写角色名称", trigger: "blur" },
})

//表单实例
let emit = defineEmits('over')
let ruleFormRef = ref(null);
let addroles = () => {
  ruleFormRef.value.validate(async (isVal) => {
    if (isVal)
    {
      let data = {
        roleName: ruleForm.rolename,
        roleDesc: ruleForm.roledes,
      }
      let res = await addRoles(data);
      console.log(res);
      if (res.data.meta.status == 201){
        console.log('111')
        showElemessage("修改成功", 'success', 2000);
        handleClose()
        //通知父组件添加成功了 您帮我重新请求一次数据
        emit('over')

      } else
      {
        console.log('222')
        showElemessage(res.data.meta.msg, 'error', 2000)
      }
    }
  })
}

</script>


<style>
</style>